<!--
  Switch 开关组件                     zls-2023/08/01
    所有属性、事件、方法、插槽，请参考   https://vant-contrib.gitee.io/vant/#/zh-CN/switch
  
    Attributes
      1、list       多选框列表数据，格式为 [{ text: '复选框1', value: '1',disabled: false }]
    
    Demo
      <Form ref="formRef">
        <z-checkbox v-model="form.checkboxList" label="复选框回选" :list="checkboxList"></z-checkbox>
      </Form>

      const form = reactive({
        checkboxList: ['2']
      })

      const checkboxList = reactive([
        { text: '复选框1', value: '1' },
        { text: '复选框2', value: '2' },
        { text: '复选框3', value: '3' }
      ])
-->
<template>
  <z-input
    :label="$attrs['label']"
    :required="$attrs['required']"
    :border="$attrs['border']"
    :label-width="$attrs['label-width']"
    :rules="$attrs['required'] || $attrs['required'] === '' ? [{ required: true, message: '请选择' }] : []"
  >
    <template #input>
      <Switch v-bind="{ ...attrsSwitchDefault, ...$attrs }" v-model="checked" @change="change"></Switch>
    </template>
  </z-input>
</template>

<script>
export default { name: 'z-switch' }
</script>
<script setup>
import { ref, useAttrs } from 'vue'
import { Switch } from 'vant'
import { pxToRem } from '@/utils/index'
const emit = defineEmits(['update:modelValue'])
const attrs = useAttrs()

const checked = ref([])
checked.value = attrs.modelValue

// Switch默认属性
const attrsSwitchDefault = {
  'active-value': typeof checked.value === 'string' ? '1' : 1,
  'inactive-value': typeof checked.value === 'string' ? '0' : 0,
  size: pxToRem(18)
}

function change(val) {
  emit('update:modelValue', val)
}
</script>

<style lang="scss" scoped>
:deep(.van-field__value) {
  display: flex;
  justify-content: flex-end;
}
</style>
